<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .addclass{
	color:red;
     font-size:25px;
     }
      .addclass2{
	background: #666;
      }
   </style>
</head>
<body> 
	 <div class="container" >
	 
		<div class="panel panel-default" id="app">
			  <div class="panel-body">
			  	    <h1>vue2.0 Class 与 Style 绑定</h1>
                   <h2>class的绑定(动态切换class 改变的仅仅是类名)</h2>
                   	<div v-bind:class="classObject">{{ message}}</div>
                   	 <div v-bind:class="classObject2">{{ message}}</div>
                   	 <button v-on:click="myclick" class="btn btn-warning">点击试试</button>
			  </div>
		</div>
		
		<div class="panel panel-default" id="app2">
			  <div class="panel-body">
			  	    <h1>vue2.0 Class 与 Style 绑定</h1>
                   <h2>style的绑定(动态直接改变style)</h2>
                   	<div v-bind:style="styleObject">{{ message}}</div>
                   	 <button v-on:click="myclick2" class="btn btn-warning">点击试试</button>
			  </div>
		</div>		
	   		
	 </div>
</body>
</html>
<script>
 new Vue({
  el: '#app',
  data: {
	  message:  "Hello Word!",
	  isActive: true,
	  isAcrive2:1000
  },
  computed:{
	  classObject:function(){
		  return {
		      addclass: this.isActive && 1> 0,  /*这里对象属性的值  的条件必须等于true 就返回addclass这个类*/
		      addclass2:  this.isAcrive2 >800 && 1> 0  /*可以返回多个类 同理 条件也必须为真*/
		    }
	  },
	  classObject2:function(){
		  return {
			  addclass:this.isActive /*相当于 this.isActive？' addclass' : '' ; 三元运算符   */
		  }
	   }  
  },
  methods:{
	  myclick:function(){
		  this.isActive ==true? this.isActive =false : this.isActive =true;
	  }
  }
});

 new Vue({
	 el:"#app2",
	 data:{
		 message:"Word Hello!",
		 mycolor: 'red',
		 myfontSize:10
	 },
	 computed:{
		 styleObject : function(){
			return {
				color: this.mycolor,
				fontSize: this.myfontSize + 3 + "px"
				}
		 }
	 }, 
	 methods:{
		  myclick2:function(){
			  this.myfontSize +=1;
		  }
	 }
 });

 
</script>


